<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script type="text/javascript">
	window.onload = function  () {
		var oTab = document.getElementById('tab');
		//alert(oTab.children[1].children[1].children[2].innerHTML);		//女
		/*
			thead : 表格头
			tBodies : 表格主体
			tFoot : 表格尾
			rows : 行
			cells : 列
		*/
		//alert(oTab.tBodies[0].rows[1].cells[2].innerHTML)		//女

		//动态添加
		var data = [
			{id:1, username:'Leo', sex:'男'},
			{id:2, username:'小美', sex:'女'},
			{id:3, username:'王亮', sex:'男'},
			{id:4, username:'莫涛', sex:'男'}
		];

		var oTbody = oTab.tBodies[0];
		for (var i = 0; i < data.length; i++) {
			var oTr = document.createElement('tr');

			if ( i%2) {
				oTr.style.background = '#ccc';	//不是oTr[i]
			}else{
				oTr.style.background = '#fff';
			}

			fn('id');
			fn('username');
			fn('sex');

			var oTd = document.createElement('td');
			var oA = document.createElement('a');
			oA.innerHTML = '删除';
			oA.href = 'javascript:;';
			oTd.appendChild( oA );
			oTr.appendChild( oTd );
			oTbody.appendChild( oTr );

			oA.onclick = function (){
				oTbody.removeChild( this.parentNode.parentNode );			//用this
				for (var i = 0; i < oTbody.rows.length; i++) {				//**** 用oTbody.rows ****
					if ( i%2) {
						oTbody.rows[i].style.background = '#ccc';			//**** 不是oTr[i] ****
					}else{
						oTbody.rows[i].style.background = '#fff';
					}
				};
			}

			function fn (v) {
				var oTd = document.createElement('td');		//每循环一次都要新创建一次
				oTd.innerHTML = data[i][v];			//不是id.value
				oTr.appendChild( oTd );				//
				oTbody.appendChild( oTr );
			}

		};


		
		var aTd = document.createElement('td')
	}
	</script>
</head>
<body>
	<table id="tab" width="100%" border="1px">
		<thead>
			<th>编号</th>
			<th>姓名</th>
			<th>性别</th>
			<th>操作</th>
		</thead>
		<tbody>
			<!-- <tr>
				<td>1</td>
				<td>Leo</td>
				<td>男</td>
				<td><a href="javascript:void(0)">删除</a></td>
			</tr>
			<tr>
				<td>2</td>
				<td>Tt</td>
				<td>女</td>
				<td><a href="javascript:void(0)">删除</a></td>
			</tr> -->
		</tbody>
	</table>
</body>
</html>